<script setup lang="ts">
import { useUserStore } from '@/stores/counter';
import type { ChannelItem, ChannelResData } from '@/types/data';
import axios from 'axios';
import { ref, reactive, computed, onMounted } from 'vue';

const channels = ref<ChannelItem[]>([])

onMounted(async() => {
  const res = await axios.get<ChannelResData>('http://geek.itheima.net/v1_0/channels')
  channels.value = res.data.data.channels
})


const stores = useUserStore()


</script>


<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: i === stores.channel_id }"
        href="javascript:;"
        v-for="(item, i) in channels"
        :key="item.id+item.name"
        @click="stores.changeId(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
